<template>
  <div>
    <a-alert
      description="可创建不同分类，以便对日程进行分类管理。如：公司日程、项目日程、客户日程、合同日程等等"
      type="info"
      show-icon
      style="margin-bottom: 27px"
    />
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="16">
          <a-form layout="inline" :model="listQuery">
            <a-form-item label="搜索项">
              <a-input v-model:value="listQuery.title" placeholder="输入分类名搜索..." />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="8">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon><SyncOutlined /></template>
              </a-button>
            </a-tooltip>
            <a-button
              v-permission="{ action: 'calendar_cate_edit' }"
              type="primary"
              style="margin-left: 12px"
              @click="addNewData"
            >
              <template #icon><PlusOutlined /></template> 新增分类
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :rowKey="(record) => record._id"
      :dataSource="dataList.data"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title_table="{ text: record }">
        <IconFont type="anticon-el_wenjianjia" /> {{ record }}
      </template>
      <template #is_default="{ text: record }">
        <a-switch
          v-model:checked="record.is_default"
          checked-children="是"
          un-checked-children="否"
          :checkedValue="1"
          :unCheckedValue="0"
          @change="changeDefault(record)"
        />
      </template>
      <template #action="{ text: record }">
        <a v-permission="{ action: 'calendar_cate_edit' }" @click="calendar_cate_edit(record)"
          ><EditOutlined /> 编辑</a
        >
        <a-divider type="vertical" />
        <a
          v-permission="{ action: 'calendar_cate_del' }"
          style="color: red"
          @click="calendar_cate_delete(record)"
          ><DeleteOutlined /> 删除</a
        >
      </template>
    </a-table>
    <a-drawer
      width="50%"
      title="分类详情"
      placement="right"
      :open="drawerShow"
      @close="
        () => {
          drawerShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              drawerShow = false
            }
          "
          >取消</a-button
        >
        <a-button type="primary" :loading="submitLoading" @click="addItem">提交</a-button>
      </template>
      <a-form
        ref="formRef"
        :model="FormState"
        :rules="FormRule"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-form-item label="分类名" has-feedback required name="title">
          <a-input v-model:value="FormState.title" placeholder="请输入分类名" />
        </a-form-item>
        <a-form-item label="备注" name="desc">
          <a-textarea v-model:value="FormState.desc" placeholder="请输入备注" />
        </a-form-item>
        <a-form-item label="默认分类" name="is_default">
          <a-switch
            v-model:checked="FormState.is_default"
            checked-children="是"
            un-checked-children="否"
            :checkedValue="1"
            :unCheckedValue="0"
          />
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { Row, Col, Modal, Divider, Drawer, Switch } from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  BookOutlined,
  DownOutlined
} from '@ant-design/icons-vue'
import { delCateItem, getCateList, editCateInfo, changeDefaultCate } from '@/api/schedule'
import { useRouter } from 'vue-router'
import { requestFailed, requestSuccess } from '@/utils/feedback'

export default defineComponent({
  name: 'Group',
  components: {
    SyncOutlined,
    DownOutlined,
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    BookOutlined,
    [Row.name]: Row,
    [Drawer.name]: Drawer,
    [Switch.name]: Switch,
    [Col.name]: Col,
    [Divider.name]: Divider
  },
  setup() {
    const formRef = ref()
    const router = useRouter()
    const state = reactive({
      loading: true,
      need_refresh: false,
      drawerShow: false,
      submitLoading: false,
      dataList: [],
      selectCate: {},
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        title: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15,
        current: 1
      },
      columns: [
        {
          title: 'ID',
          dataIndex: '_id',
          width: '300px'
        },
        {
          title: '分类名',
          dataIndex: 'title',
          slots: { customRender: 'title_table' }
        },
        {
          title: '备注',
          dataIndex: 'desc'
        },
        {
          title: '默认分类',
          slots: { customRender: 'is_default' }
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          width: '260px'
        },
        {
          title: '操作',
          slots: { customRender: 'action' },
          width: '260px'
        }
      ]
    })
    onMounted(() => {
      state.loading = true
      getDataList()
    })

    const FormState = reactive<any>({
      title: '',
      is_default: 0,
      desc: ''
    })
    const FormRule = {
      title: [{ required: true, message: '请输入分类名', trigger: ['blur', 'change'] }]
    }

    function handleTableChange(e) {
      state.loading = true
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      state.pagination.current = e.current
      getDataList()
    }

    function reloadList() {
      state.loading = true
      getDataList()
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
    }

    function getDataList() {
      getCateList(state.listQuery).then((res) => {
        state.loading = false
        state.dataList = res
        state.pagination.total = res.totalCount
      })
    }

    function calendar_cate_edit(itemData) {
      state.drawerShow = true
      for (const key in FormState) {
        FormState[key] = ''
      }
      for (const key in itemData) {
        FormState[key] = itemData[key]
      }
    }
    function addNewData() {
      state.drawerShow = true
      for (const key in FormState) {
        FormState[key] = ''
      }
    }
    function changeDefault(e) {
      changeDefaultCate({ id: e._id }).then((res) => {
        if (res.code === 200) {
          reloadList()
          requestSuccess(res)
        } else {
          requestFailed(res)
        }
      })
    }
    function calendar_cate_delete(data) {
      Modal.confirm({
        title: '确认永久删除分类?',
        content: '分类名：【' + data.title + '】',
        okType: 'danger',
        onOk() {
          delCateItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function addItem() {
      state.submitLoading = true
      editCateInfo(FormState).then((res) => {
        if (res.code === 200) {
          state.submitLoading = false
          state.drawerShow = false
          reloadList()
          requestSuccess(res)
        } else {
          requestFailed(res)
        }
      })
    }
    return {
      ...toRefs(state),
      handleTableChange,
      reloadList,
      searchSubmit,
      changeDefault,
      FormState,
      FormRule,
      calendar_cate_delete,
      formRef,
      addNewData,
      addItem,
      router,
      calendar_cate_edit,
      getDataList
    }
  }
})
</script>

<style scoped></style>
